<template>
	<div id="channel">
		<header>
	  		<div class="header_1">
	  			<div class="header_1_l">
	  				<a href="tencent://message/?uin=800856669&Site=&Menu=yes" target="_self" class="qq">
	  					<img src="../../static/img/header-01.png"/>
	  					<p>在线客服</p>
	  				</a>
	  				<span></span>
	  				<div @click="collection('赶紧试','http://192.168.0.126:3000/home/index')" class="collection">
	  					<img src="../../static/img/header-02.png"/>
	  					<p>收藏</p>
	  				</div>
	  			</div>
	  			<div class="header_1_r">
	  				<ul v-if="!token">
	  					<li><router-link to="/IDoperation/login">商家登录</router-link></li>
	  					<li class="feature"><router-link to="/IDoperation/register">免费注册</router-link></li>
	  				</ul>
	  				<p id="logout" v-else><router-link to="/agent/agentCenter">{{user}}</router-link> <span @click="logout" class="logout">退出</span></p>
	  				<span class="color_fg"></span>
	  				<router-link v-wechat-title='$route.meta.title' to="/home/index">赶紧试首页</router-link>
	  				<span class="color_fg"></span>
	  				<router-link to="/share">分享赚钱<span>月入4000</span></router-link>
	  				<span class="color_fg"></span>
	  				<router-link to="/help">帮助中心</router-link>
	  			</div>
	  		</div>
		</header>
		<div class="banner"></div>
		<div class="channel_1">
			<img src="../../static/img/channel-02.png"/>
			<div class="channel_1_title">
				<h3>你的痛点 我来解决</h3>
				<span></span>
			</div>
			<div class="channel_title">
				哪些商家需要使用赶紧试免费试用？
			</div>
			<div class="channel_1_item">
				<div class="item_title">
					<span>①</span>
					<p>原来使用淘客快速起量的商家。</p>
				</div>
				<p>单一淘客渠道成交，权重低，使用赶紧试免费试用的多渠道成交，不但能起到快速起量的效果</p>
			</div>
			<div class="channel_1_item">
				<div class="item_title">
					<span>②</span>
					<p>需要打造基础销量的商家。</p>
				</div>
				<p>你的基础销量还靠刷单吗？和刷单告别吧！赶紧试免费试用基础销量服务，让真实买家购买，最优质的客户群，打开更多的人</p>
			</div>
			<div class="channel_1_item">
				<div class="item_title">
					<span>③</span>
					<p>原来每天靠刷单来维持转换率和排名的商家。</p>
				</div>
				<p>使用赶紧试免费试用每日固定放出一定比例的试用订单，让真实买家多渠道购买，减少推广成本和降权风险的同时，获得更多潜在买家和订单。</p>
			</div>
			<div class="channel_1_item">
				<div class="item_title">
					<span>④</span>
					<p>需要处理积压库存的商家。</p>
				</div>
				<p>大量积压库存怎么处理？用积压库存换取真实买家成交，优化店铺权重和店铺层级，划算！</p>
			</div>
			<div class="channel_1_item">
				<div class="item_title">
					<span>⑤</span>
					<p>浏量多，转化低的商家。</p>
				</div>
				<p>因为缺少购买信心，导致真实买家只浏览不购买，日积月累大大降低了综合排名。赶紧试试用 优化店铺DSR，优化宝贝转化率，增强购买信心</p>
			</div>
			<div class="channel_1_item">
				<div class="item_title">
					<span>⑥</span>
					<p>刚入淘宝天猫 ，排名迟迟无法优化，店铺一直无法盈利。</p>
				</div>
				<p>平台资深运营 专业一对一指导 全面解析淘宝规则 安全 稳定 有效优化权重。 高效！</p>
			</div>
			<div class="connect">
				<img src="../../static/img/channel-03.png"/>
				<img src="../../static/img/channel-03.png"/>
			</div>
		</div>
		<!----------活动流程--------------->
		<div class="channel_2">
			<div class="channel_title">
				活动流程
			</div>
			<img src="../../static/img/channel-04.png"/>
			<div class="process">
				<div class="line"></div>
				<div class="process_item">
					<img src="../../static/img/channel-05.png"/>
					<div class="process_text">
						<h3>发布活动</h3>
					</div>
				</div>
				<div class="process_day">
					第一天
				</div>
				<div class="process_item">
					<img src="../../static/img/channel-05.png"/>
					<div class="process_text">
						<p>淘内真实买家通过指定关键词搜索进店， 深度浏览，加入购物车，等待第二天开奖</p>
						<div class="label">
							带来真实加购，提升综合人气排名
						</div>
					</div>
				</div>
				<div id="day2" class="process_day">
					第二天
				</div>
				<div class="process_item">
					<img src="../../static/img/channel-06.png"/>
					<div class="process_text">
						<div class="contrast">
							<p>中奖：</p>
							<p>买家需收藏宝贝，关注店铺，货比三家, 浏览副宝贝，下单</p>
						</div>
						<div class="label">
							带来真实免费的收藏、打造店铺标签及巩固宝贝标签
						</div>
					</div>
					<div class="process_text process_text2">
						<div class="contrast">
							<p>未中奖：</p>
							<p>买家通过购物车进店（收藏宝贝、关注店铺），等待第三天开奖</p>
						</div>
					</div>
				</div>
				<div id="day2" class="process_day">
					第三天
				</div>
				<div class="process_item">
					<img src="../../static/img/channel-06.png"/>
					<div class="process_text">
						<div class="contrast">
							<p>中奖：</p>
							<p>买家需货比三家，浏览副宝贝后下单</p>
						</div>
						<div class="label">
							真实买家的操作行为和打造人群标签
						</div>
					</div>
					<div class="process_text process_text2">
						<div class="contrast">
							<p>未中奖：</p>
							<p>买家再次通过购物车进店，货比三家，等待第四天开奖</p>
						</div>
					</div>
				</div>
				<div id="day2" class="process_day">
					第四天
				</div>
				<div class="process_item">
					<img src="../../static/img/channel-06.png"/>
					<div class="process_text">
						<div class="contrast">
							<p>中奖：</p>
							<p>买家需浏览副宝贝后下单</p>
						</div>
						<div class="label">
							提交全店宝贝浏览和优化店铺标签
						</div>
					</div>
					<div class="process_text process_text2">
						<div class="contrast">
							<p>未中奖：</p>
							<p>买家再次通过购物车进店，浏览副宝贝，等待下一天</p>
						</div>
					</div>
				</div>
				<div id="day2" class="process_day">
					第N天
				</div>
				<div class="process_item">
					<img src="../../static/img/channel-06.png"/>
					<div class="process_text">
						<div class="contrast">
							<p>中奖：</p>
							<p>买家通过购物车下单</p>
						</div>
					</div>
					<div class="process_text process_text2">
						<div class="contrast">
							<p>未中奖：</p>
							<p>此次活动将没有资格中奖，免费给商家带来真实免费的搜索流量、收藏加购、货比等流程</p>
						</div>
					</div>
				</div>
				<div class="process_end">
					<img src="../../static/img/channel-07.png"/>
				</div>
			</div>
			<p>下单的买家收到货后填写试用报告等待验证</p>
			<div class="connect">
				<img src="../../static/img/channel-03.png"/>
				<img src="../../static/img/channel-03.png"/>
			</div>
		</div>
		<div class="channel_3">
			<div class="channel_title">
				赶紧试免费试用和淘内外渠道的对比
			</div>
			<img class="table" src="../../static/img/channel-08.jpg"/>
			<img src="../../static/img/channel-09.png"/>
		</div>
	</div>
</template>

<script>
export default{
	name: 'channel',
	data:function(){
		return{
			token: '',
			user: '',//商家昵称
		}
	},
	methods:{
	  	collection: function(title,url){
	  		try{
			   window.external.addFavorite(url,title);
			}
			catch(e){
				try{
				    window.sidebar.addPanel(title,url,"");
				}
				catch(e){
					this.$alert("3","抱歉，您所使用的浏览器无法完成此操作。请使用快捷键Ctrl+D进行添加！");
				}
			}
	  	},
		info: function(){
			var _this = this;
			_this.$axios.post('/agent/info/show').then(function(res){
			    var data = res.data.result;
		    	_this.user = data.nickName;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		logout: function(){
			localStorage.removeItem('token');
			this.$router.push('/IDoperation/login');
		},
	},
	created:function(){
		$(window).scrollTop(0);
		var token = localStorage.getItem('token');
		if(token){
			this.token = token;
			this.info();
		}
	},
}
</script>

<style scoped>
#channel{
	background-color: #fff;
	padding-bottom: 80px;
	margin-bottom: -30px;
}
/* ========== */
/* = Header = */
/* ========== */
header{
	width: 100%;
	background-color: #F5F5F5;
	min-width: 1366px;
}
header .router-link-active{
	color: #ff464e;
}
.header_1{
	width: 1230px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #808080;
	font-size: 12px;
	padding: 5px 0;
}
.header_1_l{
	display: flex;
	align-items: center;
}
.header_1_l span{
	height: 10px;
	width: 1px;
	background-color: #9f9f9f;
	margin: 0 15px;
}
.qq,.collection{
	display: flex;
	align-items: center;
	cursor: pointer;
}
.qq img,.collection img{
	height: 15px;
	display: block;
	margin-right: 3px;
}
.header_1_r{
	display: flex;
	align-items: center;
}
.header_1_r .color_fg{
	height: 10px;
	width: 1px;
	background-color: #9F9F9F;
	margin: 0 10px;
}
.header_1_r ul{
	display: flex;
	align-items: center;
}
.header_1_r ul li{
	margin-left: 10px;
}

.header_1_r #logout{
	display: flex;
}
.header_1_r .logout{
	color: #FF464E;
	cursor: pointer;
	margin-left: 5px;
}
.header_1_r a{
	display: flex;
	align-items: center;
}
.header_1_r a span{
	color: #FF464E;
}
.header_1_r a img{
	height: 8px;
	display: block;
	margin-left: 3px;
}
.feature{
	color: #ff464e;
}
.banner{
	height: 450px;
	background: url('../../static/img/channel-01.jpg') no-repeat center;
	background-size: auto 100%;
}
/*------------你的痛点我来解决-------------*/
.channel_1{
	background-color: #fff;
	border-radius: 10px;
	width: 1100px;
	margin: 0 auto;
	margin-top: -100px;
	box-shadow: 0 0 25px #9A71FB;
	position: relative;
	padding: 30px 150px;
	padding-bottom: 60px;
	box-sizing: border-box;
}
.channel_1>img{
	position: absolute;
	width: 100px;
	display: block;
	top: -40px;
	left: 80px;
}
.channel_1_title{
	margin-bottom: 15px;
}
.channel_1_title h3{
	font-size: 22px;
	font-weight: 600;
	color: #4D4D4D;
	text-align: center;
}
.channel_1_title span{
	background-color: #a75ff1;
	height: 3px;
	width: 60px;
	border-radius: 50px;
	display: block;
	margin: 0 auto;
	margin-top: 5px;
}
.channel_title{
	background: linear-gradient(to right,#bb8cf6,#d2b6ff);
	color: #FFFFFF;
	width: 400px;
	height: 36px;
	line-height: 36px;
	border-radius: 50px;
	text-align: center;
	font-size: 16px;
	margin: 0 auto;
}
.channel_1_item{
	margin-top: 20px;
}
.channel_1_item .item_title{
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}
.channel_1_item .item_title span{
	font-size: 18px;
	color: #9658eb;
	margin-right: 10px;
}
.channel_1_item .item_title p{
	font-size: 16px;
	font-weight: 600;
	color: #4D4D4D;
}
.channel_1_item>p{
	color: #9A9A9A;
	padding-left: 30px;
	box-sizing: border-box;
}
.connect{
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 320px;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	bottom: -60px;
	z-index: 2;
}
.connect img{
	height: 100px;
	display: block;
}
/*---------活动流程------------*/
.channel_2{
	background-color: #fff;
	border-radius: 10px;
	width: 1100px;
	margin: 0 auto;
	margin-top: 20px;
	box-shadow: 0 0 25px #9A71FB;
	position: relative;
	padding: 40px 0;
	padding-bottom: 60px;
	box-sizing: border-box;
}
.channel_2>p{
	text-align: center;
	margin-top: 10px;
	color: #9A9A9A;
}
.channel_2 .channel_title{
	width: 200px;
}
.channel_2>img{
	width: 240px;
	display: block;
	margin: 0 auto;
	margin-top: -5px;
}
.process{
	margin-top: 30px;
	position: relative;
	z-index: 1;
}
.process .line{
	width: 2px;
	height: 100%;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 0;
	background-color: #E6E6E6;
	z-index: -1;
}
.process_item{
	width: 60px;
	margin: 0 auto;
	position: relative;
}
.process_item img{
	width: 100%;
	display: block;
	margin: 0 auto;
}
.process_item .process_text{
	position: absolute;
	top: 0;
	right: auto;
	left: 70px;
	width: 300px;
}
.process_item .process_text h3{
	height: 30px;
	line-height: 30px;
	color: #4D4D4D;
	font-size: 16px;
	font-weight: 600;
}
.process_item .process_text p{
	color: #9A9A9A;
}
.process_item .process_text div.label{
	display: inline-block;
	background-color: #d4b7f9;
	color: #e237f8;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	border-radius: 0 10px 10px 10px;
	margin-top: 5px;
	white-space: nowrap;
}
.process_item .process_text .contrast{
	display: flex;
}
.process_item .process_text .contrast p:first-child{
	white-space: nowrap;
}
.process_item .process_text2{
	position: absolute;
	top: 0;
	left: auto;
	right: 70px;
}
.process_end{
	width: 32px;
	margin: 0 auto;
	position: relative;
	margin-top: 50px;
}
.process_end img{
	width: 100%;
	display: block;
}
.process .process_day{
	width: 100px;
	margin: 0 auto;
	background-color: #e63bfc;
	border-radius: 50px;
	color: #FFFFFF;
	height: 28px;
	line-height: 28px;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;
}
.process #day2{
	margin-top: 70px;
}
/*---------渠道对比------------*/
.channel_3{
	background-color: #fff;
	border-radius: 10px;
	width: 1100px;
	margin: 0 auto;
	margin-top: 20px;
	box-shadow: 0 0 25px #9A71FB;
	position: relative;
	padding: 50px 80px;
	padding-bottom: 60px;
	box-sizing: border-box;
}
.channel_3 img.table{
	width: 100%;
	display: block;
	margin-top: 20px;
}
.channel_3 img:last-child{
	position: absolute;
    width: 100px;
    display: block;
    bottom: -40px;
    right: 80px;
}
</style>